<template>
  <div style="display: inline-block;width: 100%;float: left;height: 100%;">
    <el-col :span="10" style="height: 100%;margin-right: 50px;">
    <el-tree
        :data="this.data"
        node-key="id"
        :expand-on-click-node="false" 
        default-expand-all
        style="height: 90%;overflow-x: scroll; overflow-x: scroll;font-size: 12px;"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button
            type="text"
            size="mini"
            @click="() => append(data)" style="font-size: 12px;">
          添加计划
        </el-button>
        <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)" style="font-size: 12px;">
          删除计划
        </el-button>
        <el-button
            type="text"
            size="mini"
            @click="() => finish(node, data)">
          完成计划
        </el-button>
      </span>
    </span>
    </el-tree>
    </el-col>
    <el-col :span="2" style=""></el-col>

    <el-col :span="10" style="height: 100%">
    <el-tree
        :data="this.done_data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        style="height: 90%;overflow-x: scroll;font-size: 12px;"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span style="overflow-x: scroll;">{{ node.label }}</span>
      <span>
        <el-button
            type="text"
            size="mini"
            @click="() => unfinish(node, data)">
          移到未完成
        </el-button>

      </span>
    </span>
    </el-tree>
    </el-col>
    <el-dialog
        title="完成事项"
        :visible.sync="this.dialogVisible"
        width="30%"
       >
      <el-form  label-width="80px" :model="formLabelAlign">
        <el-form-item label="完成事项:">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="selectType" placeholder="计划类型" style="margin-left: -50%;width: 120px;">
            <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="this.addUndo">添加</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import Message from "element-ui/lib/message";
import axios from "@/api/ajax";

export default {
  name: "undo_data",
  data:() => {
    return{
      dialogVisible : false,
      done_data:[],
      data : [],
      currentNode:{},
      formLabelAlign: {
        name: '',
        id: 0,
        type: ''
      },
      types:[],
      selectType:"",
      mapundo : {},
      mapDone : {},
    }
  },
  methods: {
    getUndos(){
      axios.get('/undo').then(response => {
        this.data = []
        this.mapundo = {}
        this.mapDone = {}
        this.done_data = []
        if (response.data.Status === 0) {
          if(response.data.Data.length === 0 ){
            axios.put('/undo', {
              "content":"待办事项",
              "parent":0,
              "type":0
            }).then(response => {
              if (response.data.Status === 0) {
                  Message.success("新增待办事项:")
              }
            }).catch(reason => {
                Message.error("网络错误:" + reason)
            })
          }
          // 未完成时间
          for(let i = 0;i < (response.data.Data.length) ; i ++){
            let obj = {
              id: response.data.Data[i].id,
              label:response.data.Data[i].content + "            :  " + response.data.Data[i].create_time.substring(0,10),
              children: []
            }
            if(response.data.Data[i].parent === 0){
              if(response.data.Data[i].done == 1) 
                continue
              this.data.push(obj)
            }
            this.mapundo[response.data.Data[i].id] = obj
          }

          for(let i = 0;i < (response.data.Data.length) ; i ++){
            if(response.data.Data[i].parent === 0){
            }else{
              if(this.mapundo[response.data.Data[i].parent] != null){
                if(response.data.Data[i].done == 1) 
                  continue
                this.mapundo[response.data.Data[i].parent].children.push(this.mapundo[response.data.Data[i].id])
              }
            }
          }
          
          let root = {}
          for(let i = 0;i < (response.data.Data.length) ; i ++){
            let obj = {
              id: response.data.Data[i].id,
              label:response.data.Data[i].content +  "     :  " + response.data.Data[i].finish_time.substring(0,10),
              children: []
            }
            this.mapDone[response.data.Data[i].id] = obj
            if(response.data.Data[i].parent === 0)
              root = obj
          }
          console.log(this.mapDone)
          try{
          
            for(let i = 0;i < (response.data.Data.length) ; i ++) {
              if(response.data.Data[i].done === 1) {
                let fors = response.data.Data[i]
                
                while(fors.parent !== 0){
                  let parent = this.mapDone[fors.parent]
                  let obj = this.mapDone[fors.id]
                  let found = 0
                  if (parent == undefined){
                    console.log("12312312",fors.parent)
                    break
                  }
                  if(parent.children == undefined){
                    console.log("fsdfasdfasd")
                  }
                  
                  for(let i = 0;i < (parent.children.length); i++) {
                    console.log(parent.children[i])
                    if(parent.children[i].id == obj.id){
                      found = 1
                      break
                    }
                  }
                  if(found === 0){
                    parent.children.push(obj)
                  }
                  for(let i = 0;i < (response.data.Data.length) ; i ++) {
                      if(fors.parent == response.data.Data[i].id){
                        fors = response.data.Data[i]
                      }
                  }
                }
              }
            }
          }catch(e ){
            console.log(e)

          }

          root.label = "完成事项"
          this.done_data.push(root)
        }
      }).catch(reason => {
          Message.error("网络错误:" + reason)
      })
    },
    addUndo(){
      if(this.formLabelAlign.name === ""){
        Message.error("内容为空")
        return
      }
      axios.put('/undo', {
        "content":this.formLabelAlign.name,
        "parent":this.currentNode.id,
        "type":this.selectType
      }).then(response => {
        if (response.data.Status === 0) {
          console.log(this.currentNode)
          Message.success("添加成功")
          const newChild = { id: response.data.Data, label: this.formLabelAlign.name, children: [] }
          this.currentNode.children.push(newChild)
        }
      }).catch(reason => {
          Message.error("网络错误:" + reason)
      })
      this.dialogVisible = false
      console.log(this.data)
    },
    append(data) {
      this.dialogVisible = true
      if (!data.children) {

        this.$set(data, 'children', [])
      }
      this.currentNode = data
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      if(data.children.length > 0){
        Message.error("请先删除子项")
        return
      }
      axios.delete('/undo/' + data.id).then(response => {
        console.log(response.data)
        Message.success("删除成功:")
        this.getUndos()
      }).catch(reason => {
          Message.error("网络错误:" + reason)
      })
      children.splice(index, 1)
    },
    finish(node,data){
        if(data.children.length > 0){
          Message.error("请先完成子项")
          return
      }
       axios.post('/undo_finish/' + data.id).then(response => {
        if (response.data.Status === 0) {
          Message.success("完成" + data.label)
          this.getUndos()
        }
      }).catch(reason => {
          Message.error("网络错误:" + reason)
      })
    }
    ,
    unfinish(node,data){
        if(data.children.length > 0){
          Message.error("请先完成子项")
          return
      }
       axios.post('/undo_unfinish/' + data.id).then(response => {
        if (response.data.Status === 0) {
          Message.success("完成" + data.label)
          this.getUndos()
        }
      }).catch(reason => {
          Message.error("网络错误:" + reason)
      })
    },
  },
  created(){
    this.types = this.Global.planTypes
    this.getUndos()
  },
  mounted() {
  },
  beforeCreate() {
  }
}
</script>
<style scoped>
.custom-tree-node {
  justify-content: space-around;
  display:block;
  padding-right: 8px;
  overflow-x: auto;
  overflow-y: auto;
  margin-top: 10px;
}
</style>
